<template>
  <div class="forgetps-container self-input" ref="ftps">
    <el-steps :active="active" finish-status="success" align-center>
      <el-step title="安全验证"></el-step>
      <el-step title="重置密码"></el-step>
      <el-step title="重置完成"></el-step>

    </el-steps>
    <div class="">
      <div class="dialog-content forgetps-group" v-show="active === 0">
        <div class="dialog-input " :style="{marginTop: '50px', position: 'relative'}">
          <el-input placeholder="请输入电话号码"  v-model="phone" v-validate.disable="'required|phone'" name="phone" @blur="valiUser()"></el-input>
          <!-- <span class="el-icon-warning" v-show="errors.has('phone')">&nbsp;&nbsp;该手机号尚未注册，请 <a href="#">注册</a></span> -->
          <span class="el-icon-warning" v-show="errors.has('phone') && phone.length === 0">&nbsp;&nbsp;手机号不能为空</span>
          <span class="el-icon-warning" v-show="errors.has('phone') && phone.length > 0">&nbsp;&nbsp;手机号错误</span>
          <span class="el-icon-warning" v-show="isNouser && !errors.has('phone')">&nbsp;&nbsp;当前手机号未注册</span>
        </div>
        <el-row class="diaglo-btn" :gutter="18">
          <el-col :span="12">
            <el-input placeholder="验证码" v-model="smsCode" v-validate.disable="'required|length:6'" name="smsCode"></el-input>
            <span class="el-icon-warning" v-show="errors.has('smsCode') && !isNouser">&nbsp;&nbsp;请填写您所收到的短信验证码</span>
          </el-col>
          <el-col :span="12">
            <el-button type="success width-full" plain round :disabled="(times !== 0 && times !== 60) || isNouser" @click="valiPhone()">
              <span v-show="times !== 60">{{times}}s</span>
              <span v-show="times === 60">发送验证码</span>
            </el-button>
          </el-col>
        </el-row>
        <el-button type="success width-full diaglo-btn" round @click="nextPassword()">下一步</el-button>
      </div>

      <div class="dialog-content forgetps-group" v-show="active === 1">
        <div class="dialog-input" :style="{marginTop: '50px', position: 'relative'}">
          <el-input placeholder="请输入新密码"  v-model="password" type="password" v-validate.disable="'required|min:6|max:16'" name="password"
          data-vv-validate-on="blur" @blur="valiPs('password')"></el-input>
          <span class="el-icon-warning" v-show="errors.has('password') && password.length === 0">&nbsp;&nbsp;密码不能为空</span>
          <span class="el-icon-warning" v-show="errors.has('password') && password.length > 0">&nbsp;&nbsp;密码格式错误</span>
        </div>
        <div class="dialog-input">
          <el-input placeholder="确认新密码" @blur="valiPs('repassword')"  v-model="repassword" type="password" v-validate.disable="'required|min:6|max:16'" name="repassword"></el-input>
          <span class="el-icon-warning" v-show="errors.has('repassword') && repassword.length === 0">&nbsp;&nbsp;确认新密码不能为空</span>
          <span class="el-icon-warning" v-show="errors.has('repassword') && password !== repassword && repassword.length > 0">&nbsp;&nbsp;两次密码不一致</span>
        </div>
        <el-button type="success width-full diaglo-btn" round @click="nextOk()">下一步</el-button>
      </div>

      <div class="dialog-content forgetps-group" v-show="active === 3">
        <div class="forgetps-prompt">
          <li class="el-icon-circle-check"></li>
          <span>恭喜您重置密码成功!</span>
        </div>
        <el-button type="success width-full diaglo-btn" round @click="forgetLogin()">立即登陆</el-button>
      </div>
    </div>
  </div>
</template>

<script>
import axios from 'axios'
  export default {
    name: 'ForgetPassword',
    title: '忘记密码',
    data () {
      return {
        phone: '',
        smsCode: '',
        isvali: false,
        active: 0,
        times: 60, // 验证吗计数其
        password: '',
        repassword: '',
        isNouser: false
      }
    },
    mounted () {
      this.reHeight()
      window.onresize = this.reHeight
    },
    beforeRouteEnter (to, from, next) {
      next(vm => {
        vm.phone = ''
        vm.smsCode = ''
        vm.isvali = false
        vm.active = 0
        vm.times = 60
        vm.password = ''
        vm.repassword = ''
        vm.isNouser = false
      })
    },
    methods: {
      reHeight () {
        let he = document.documentElement.clientHeight
        let footertHe = document.getElementById('appfooter').clientHeight
        let headerHe = document.getElementById('appheader').clientHeight
        this.$refs.ftps.style.height = `${he-footertHe-headerHe}px`
      },
      valiPs (name) {
        this.$validator.validate(name)
      },
      valiPhone () {
        this.$validator.validate('phone').then(result => {
          if (this.$validator.errors.has('phone') || this.isNouser) {
            this.$message({
              showClose: true,
              message: '无法发送验证码，请核对错误信息进行修改',
              type: 'error'
            })
          } else { // FORGET

            axios.post('/mscs/user/sendSMSVerifyCode', this.$paramsConvert({ userName: this.phone, type: 'FORGET' })).then((res) => {
              if (res.data.code === 1) {
                this.countdown()
              }
            }).catch((error) => {
            })
          }
        })
      },
      countdown () {
        let int = setInterval(() => {
          this.times--
          if (this.times === 0) {
            window.clearInterval(int)
            this.times = 60
          }
        }, 1000)
      },
      nextPassword () {
        if (this.smsCode.length === 6 && this.phone.length === 11 && !this.isNouser ) {
          axios.get(`/mscs/user/checkSmsCode?userName=${this.phone}&code=${this.smsCode}`).then((res) => {
            if (res.data.code === 0) {
              this.$message({
                showClose: true,
                message: '验证码错误，请仔细查看',
                type: 'error'
              })
            } else if (res.data.code === 1) {
              this.active = 1
            }
          })
        } else {
          this.$message({
            showClose: true,
            message: '信息有误，请仔细核对',
            type: 'error'
          })
        }
      },
      nextOk () {
        if (this.password === this.repassword) {
          this.$validator.validate().then(result => {
            if (result) {
              axios.post('/mscs/user/retrievePassword',
              this.$paramsConvert({userName: this.phone, code: this.smsCode, newPassword: this.password})).then((res) => {
                if (res.data.code === 1) {
                  this.active = 3
                } else {
                  this.$message({
                    showClose: true,
                    message: res.data.data[0].errorMsg,
                    type: 'error'
                  })
                  this.active = 1
                }
              }).catch((error) => {})
            }
          })
        }
      },
      forgetLogin () {
        this.active = 0;
        this.$openLogin()
        this.$router.replace({path: '/',  params: { goto: 'forgetps' }})
      },
      valiUser () {
        // this.$validator.attach()
        this.$validator.validate('phone').then(result => {
          // if (!this.$validator.errors.has('username')) {
            axios.get(`/mscs/user/findUserByUsername?phone=${this.phone}`).then((res) => {
              // debugger
              if (res.data.code === 1) {
                this.isNouser = false
              } else {
                this.isNouser = true
              }
            })
          // }
        })
      },
    },
    beforeRouteLeave (to, from, next) {
      this.$validator.reset()
      next()
    },
    beforeDestory() {
      this.$validator.reset()
    }
  }
</script>
<style>
  .forgetps-container {
    padding-top: 80px;
    width: 850px;
    margin: 0 auto;
    box-sizing: border-box;
  }
  .forgetps-container .el-step__icon.is-text {
    background: #999999;
    border: none;
    color: #FFFFFF;
    height: 40px;
    width: 40px;
    font-size: 25px;
  }
  .forgetps-container .el-step.is-horizontal .el-step__line {
    top: 21px;
  }
  .forgetps-container .el-step__title {
    font-weight: bold;
  }
  .forgetps-container .el-step__head.is-process .el-step__icon.is-text{
    background: #94C05A;
  }
  .forgetps-container .el-step__title.is-process {
    color: #94C05A;
  }
  .forgetps-container .is-success .el-step__icon.is-text {
    background-color: #94C05A;
  }
  .forgetps-group {
    width: 360px;
    margin: 0 auto;
  }
  .forget-wanning {
    float: left;
    position: relative;
    color: #666666;
    right: -101%;
    bottom: 30px;
  }
  .forget-wanning a{
     color: #94C05A;
  }
  .el-icon-warning {
    color: #c05a5a;
    white-space: nowrap;
  }
  .el-icon-warning:before {
    color: #c05a5a!important;
  }
  .forgetps-prompt {
    color: #94C05A;
    font-size: 30px;
    line-height: 60px;
    white-space: nowrap;
    font-weight: bold;
    margin: 45px auto;
  }
  .forgetps-prompt span {
    position: relative;
    top: -15px;

  }
  .forgetps-prompt .el-icon-circle-check {
    font-size: 60px;
  }
</style>
